'use strict';
var React = require('react');
var ReactRedux = require('react-redux');
var ReLeftTab = require('./ReLeftTab.jsx');
var ReDialog = require('../../components/pc/ReDialog.jsx');
var ReButton = require('../../components/pc/ReButton.jsx');
var HkfsChangePassWord=require('../../components/pc/HkfsChangePassWord.jsx');
var actions = require('../../actions/myAccount');
var userOperationAction=require('../../actions/userOperation');

class HkfsMyAccount extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            user: '感觉哪里不对',
            suggestion:'',
            loadingMsgImg:true
        };
        this.doing = this.doing.bind(this);
        this.changePassWord=this.changePassWord.bind(this);
        this.submitFeedBack=this.submitFeedBack.bind(this);
        this.suggestionChange=this.suggestionChange.bind(this);
        this.changeMsgCode=this.changeMsgCode.bind(this);
        this.getMsgImgByAjax=this.getMsgImgByAjax.bind(this);
        this.submitChange=this.submitChange.bind(this);
        this.getActive=this.getActive.bind(this);
    }

    //建议值改变
    suggestionChange(event){
        var value=event.target.value;
        setTimeout(()=> {
            this.setState({
                suggestion:value
            });
        }, 0);
    }

    //获取验证码
    getMsgImgByAjax(){
        this.setState({
            loadingImg:true
        });
        var self=this;
        this.props.dispatch(userOperationAction.getMsgCodeImg(function(){
                self.setState({
                    loadingMsgImg:false
                });
            self.changePassWord();
        }));
    }

    //改变验证码
    changeMsgCode(){
        this.getMsgImgByAjax();
    }

    //显示弹框
    showDialog(message){
        var isIE8=navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/8./i)=="8.";
        if(isIE8) {
            ReDialog.showDialog({
                title: '提示',
                content: message,
                isMask: true,
                isCancel: false,
                dialogWidth: '300px',
                dialogHeight: '150px',
                result: (result)=> {
                }
            })
        }
        else{
            setTimeout(()=>{
                ReDialog.showDialog({
                    title: '提示',
                    content: message,
                    isMask: true,
                    isCancel: false,
                    dialogWidth: '300px',
                    dialogHeight: '150px',
                    result: (result)=> {
                    }
                });},600);
        }
    }

    //提交密码修改
    submitChange(oldPwd,pwd,verifyCode){
        this.props.dispatch(userOperationAction.changePassWord(oldPwd,pwd,verifyCode,(result)=>{
            ReDialog.hideDialog();
            if(result.resultCode=='200'){
               this.showDialog('更改密码成功！');
            }
            else{
                this.showDialog(result.msg);
            }
        },(errorMsg)=>{
            this.showDialog(errorMsg);
        }));
    }

    //密码修改框
    changePassWord(){
        ReDialog.showDialog({
            title: '',
            isOk: false,
            content: <HkfsChangePassWord submitChange={this.submitChange}  msgImgUrl={this.props.msgImgUrl} msgCodeClick={this.changeMsgCode} loading={this.state.loadingMsgImg}/>,
            isMask: true,
            isCancel: false,
            dialogWidth: '700px',
            dialogHeight: '470px',
            result: (result)=> {
            }
        });
    }

    //显示开发中
    doing() {
        var style={
            padding:'10px 0'
        };
        ReDialog.showDialog({
            title: '提示',
            content: <div><div style={style}><img src="images/pc/developing_small.png"/></div><div>玩命开发中</div></div>,
            isMask: true,
            isCancel: false,
            dialogWidth: '300px',
            dialogHeight: '300px',
            result: (result)=> {
            }
        });
    }

    getActive(){
        //利用window变量识别node和客户端环境，客户端渲染时才执行切换tab页的操作
        if(typeof window !== 'undefined') {
            //客户端渲染完成后修改activeItem,用于定位到特定的tab
            var CommonUrlOperation=require('../../common/CommonUrlOperation.js');
            var activeItem = CommonUrlOperation.getParametersObj().active;
            var activeStateStr='';
            switch (activeItem){
                case 'suggestions':
                    activeStateStr='4-3';
                    break;
                default :
                    activeStateStr='4-1';
                    break;
            }
            return activeStateStr;
        }
        else {
            //此处先默认4-1，之后功能完善后再做调整
            return '4-1';
        }
    }

    //提交建议
    submitFeedBack(){
        if(this.state.suggestion) {
            this.props.dispatch(actions.submitFeedBack(this.state.suggestion, (result)=> {
                var style = {
                    padding: '10px 0'
                };

                this.refs.nameInput.value = '';
                this.refs.suggestionArea.value = '';
                this.setState({
                    suggestion: ''
                });
                ReDialog.showDialog({
                    title: '提示',
                    content: <div style={style}>{result}</div>,
                    isMask: true,
                    isCancel: false,
                    dialogWidth: '300px',
                    dialogHeight: '150px',
                    result: (result)=> {
                    }
                });
            }))
        }
        else{
            ReDialog.showDialog({
                title: '提示',
                content: '请输入建议！',
                isMask: true,
                isCancel: false,
                dialogWidth: '300px',
                dialogHeight: '150px',
                result: (result)=> {
                }
            });
        }
    }

    componentDidMount() {
        var phone = this.props.myPhone;
        var resultPhone = phone ? phone.substr(0, 3) + '****' + phone.substr(7, 4) : '感觉哪里不对';
        this.setState({
            user: resultPhone
        });
    }

    render() {

        return <div className="HkfsMyAccountContainer">
            <div className="HkfsMyAccountContent">
                <ReLeftTab reClass="myAccountLeftTab" activeKeyStr={this.getActive()}>
                    <div type="header">
                        <div className="headImg"><img src="/images/pc/team_img_leader_default.png"/></div>
                        <div className="headerText">{this.state.user}</div>
                    </div>
                    <div type="normal" titleName="账户总览">
                        <div className="developingDiv">
                            <img className="developingImg" src="images/pc/developing_big.png"/>
                            <div>玩命开发中</div></div>
                    </div>
                    <div type="normal" titleName="投资记录">
                        <div className="developingDiv">
                            <img className="developingImg" src="images/pc/developing_big.png"/>
                            <div>玩命开发中</div></div>
                    </div>
                    <div type="normal" titleName="账户记录">
                        <div className="developingDiv">
                            <img className="developingImg" src="images/pc/developing_big.png"/>
                            <div>玩命开发中</div></div>
                    </div>
                    <div type="normal" isGroup={true} groupName="个人中心">
                        <div titleName="我的银行卡">
                            <div className="developingDiv">
                                <img className="developingImg" src="images/pc/developing_big.png"/>
                                <div>玩命开发中</div>
                            </div>
                        </div>
                        <div titleName="安全中心">
                            <div className="SecurityContainer">
                                <div className="CommonTitle">安全中心</div>
                                <div className="SecurityContent">
                                    <div className="SecurityItem"><img className="icon"
                                                                       src="images/pc/account_icon_safe.png"/><span
                                        className="ContentTitle">登录密码</span><span className="ContentSeted">已设置</span><a
                                        onClick={this.changePassWord} className="ContentOperation">修改</a></div>
                                    <div className="SecurityItem"><img className="icon"
                                                                       src="images/pc/account_icon_unsafety.png"/><span
                                        className="ContentTitle">交易密码</span><span
                                        className="ContentUnSeted">未设置</span><a onClick={this.doing}
                                                                                className="ContentOperation">设置</a>
                                    </div>
                                    <div className="SecurityItem"><img className="icon"
                                                                       src="images/pc/account_icon_unsafety.png"/><span
                                        className="ContentTitle">实名认证</span><span
                                        className="ContentUnSeted">未认证</span><a onClick={this.doing}
                                                                                className="ContentOperation">认证</a>
                                    </div>
                                    <div className="SecurityItem"><img className="icon"
                                                                       src="images/pc/account_icon_safe.png"/><span
                                        className="ContentTitle">绑定手机</span><span
                                        className="ContentSeted">{this.state.user}</span></div>
                                    <div className="SecurityItem"><img className="icon"
                                                                       src="images/pc/account_icon_unsafety.png"/><span
                                        className="ContentTitle">绑定邮箱</span><span
                                        className="ContentUnSeted">未绑定</span><a onClick={this.doing}
                                                                                className="ContentOperation">绑定</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div titleName="推荐好友">
                            <div className="developingDiv">
                                <img className="developingImg" src="images/pc/developing_big.png"/>
                                <div>玩命开发中</div></div>
                        </div>
                        <div titleName="意见反馈">
                            <div className="FeedBackContainer">
                                <div className="CommonTitle">意见反馈</div>
                                <div className="FeedBackContent">
                                    <div className="FeedBackPartTitle"><img
                                        src="images/pc/account_icon_new_message.png"/><span>客户留言</span></div>
                                    <div className="FeedBackMessage">
                                        <div className="UserName"><span>用户名</span><input value={this.props.myPhone} disabled="disabled"/></div>
                                        <div className="RealName"><span>姓名</span><input ref="nameInput"/></div>
                                        <div className="FeedBackDetail"><span>留言内容</span><textarea onChange={this.suggestionChange} ref="suggestionArea"/></div>
                                        <div className="FeedBackSubmit"><ReButton reClass="SubmitButton" reButtonClick={this.submitFeedBack}>提交</ReButton>
                                        </div>
                                    </div>
                                    <div className="FeedBackPartTitle"><img
                                        src="images/pc/account_icon_Wechat.png"/><span>微信扫一扫</span></div>
                                    <div className="FeedBackWeixin">
                                        <div>
                                            <img src="images/pc/account_img_ems-cnpl.jpg"/>
                                        </div>
                                        <div className="FeedBackTips">您也可以关注“华康财富”公众号与客服在线交流，实时反馈您的建议</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div titleName="风险评估">
                            <div className="developingDiv">
                                <img className="developingImg" src="images/pc/developing_big.png"/>
                                <div>玩命开发中</div></div>
                        </div>
                    </div>
                    <div type="footer" className="footerImg">
                        <div>
                            <img src="/images/pc/footer_download_app.png"/>
                        </div>
                        <div className="FooterTipss">华财通APP 随身理财</div>
                    </div>
                </ReLeftTab>
            </div>
            <ReDialog></ReDialog>
        </div>
    }
}


function mapStateToProps(state) {
    // 一般一组状态都是为一个页面服务的，所以把它们一股脑的映射过来比较方便
    // 但是把映射一一写出来也有好处，就是很容易看到组件里有什么属性

    return Object.assign({}, state.myAccount,state.userOperation);
}


module.exports = ReactRedux.connect(mapStateToProps)(HkfsMyAccount);